import React, { useState, useEffect } from 'react';
import { Pie, G2 } from '@ant-design/plots';
import { queryObjectStatus } from '@/services/panel'

const CircusChart2 = (props) => {
  const G = G2.getEngine('canvas');
  const [data, setData] = useState(null)
  const { year, quarter, type } = props
  useEffect(()=>{
    // getData()
    setData([
      {
        type: '待提交评审',
        value: 8,
      },
      {
        type: '评审中',
        value: 11,
      },
      {
        type: '已发布',
        value: 17,
      },
      {
        type: '评分审批中',
        value: 21,
      },
      {
        type: '已评分',
        value: 15,
      },
      {
        type: '复盘审批中',
        value: 19,
      },
      {
        type: '已完结',
        value: 4
      }
    ])
  },[year, quarter, type])
  const getData = async () => {
    const res = await queryObjectStatus({year, quarter, type})
    if(res.code = 200){
      if(res.data.length > 0){
        const list = res.data.map((item)=>{
          return { type: item.ostatus,value: item.num }
        })
        // const numList = list.map(item => Number(item.value));
        // const num = numList.reduce((prev,next)=>{ return prev+next })
        
        // const newList = list.map((item)=>{
        //   const num2 = (Number(item.value)/num*100).toFixed(0);
        //   return { type: item.type, value: Number(num2) }
        // })
        setData(list);
      }
    }
  }
  const cfg = {
    height: 200,
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.75,
    // legend: false,
    label: {
      type: 'inner', //spider
      labelHeight: 40,
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
  };
  const config = cfg;
  return <div style={{marginTop: '0px'}}>{data && data.length > 0 && <Pie {...config} />}</div>;
};
export default CircusChart2